<d-data-table
  #dataTable
  [fixHeader]="true"
  [dataSource]="basicDataSource"
  [showExpandToggle]="true"
  (cellEditEnd)="thisCellEditEnd($event)"
  [headerExpandConfig]="headerExpandConfig"
  [fixHeader]="true"
  [scrollable]="true"
  [tableOverflowType]="'overlay'"
  (detialToggle)="toggle($event)"
>
  <d-column field="$index" header="#" [width]="'50px'"></d-column>
  <d-column field="firstName" header="First Name" [width]="'150px'" [editable]="true"></d-column>
  <d-column field="lastName" header="Last Name" [width]="'150px'"></d-column>
  <d-column field="gender" header="Gender" [width]="'100px'"></d-column>
  <d-column field="dob" header="Date of birth" [width]="'100px'">
    <d-cell>
      <ng-template let-cellItem="cellItem">
        {{ cellItem | i18nDate: 'short':false }}
      </ng-template>
    </d-cell>
  </d-column>
</d-data-table>
<ng-template #quickAddRowTip>
  <div (click)="newRow()" class="cursor-pointer">
    <d-icon [icon]="'icon-add'" dIconHover>
      <span iconSuffix>Create new data</span>
    </d-icon>
  </div>
</ng-template>
<ng-template #quickAddRowContent>
  <div class="edit-padding-fix">
    <div class="input-block">
      <input class="devui-form-control" [(ngModel)]="defaultRowData.firstName" placeholder="firstName" type="text" />
    </div>
    <div class="input-block">
      <input class="devui-form-control" [(ngModel)]="defaultRowData.lastName" placeholder="lastName" type="text" />
    </div>
    <d-button style="margin-right: 5px" (click)="quickRowAdded()">Confirm</d-button>
    <d-button bsStyle="common" (click)="quickRowCancel()">Cancel</d-button>
  </div>
</ng-template>
<ng-template #addSubRowContent let-rowIndex="rowIndex" let-rowItem="rowItem">
  <div class="edit-padding-fix">
    <div class="input-block">
      <input class="devui-form-control" [(ngModel)]="defaultRowData.firstName" placeholder="firstName" type="text" />
    </div>
    <div class="input-block">
      <input class="devui-form-control" [(ngModel)]="defaultRowData.lastName" placeholder="lastName" type="text" />
    </div>
    <d-button style="margin-right: 5px" (click)="subRowAdded(rowIndex, rowItem)">Confirm</d-button>
    <d-button bsStyle="common" (click)="subRowCancel(rowIndex)">Cancel</d-button>
  </div>
</ng-template>
